<template>
<div class="box" v-on:dragstart="dragstart"  v-on:ondrag="drag"  v-on:ondragend="dragend" >
    <img id="one" draggable="true" src="../img/1.png" alt=""  />
    <img id="two" draggable="true" src="../img/2.png" alt=""/>

	 <canvas style="border: 1px solid #000" v-on:ondragover="dragover" v-on:ondragenter="dragenter" v-on:ondragleave="dragleave" v-on:ondrop="drop" ref="canva" id="myCanvas" 
	 width="500" height="400">
         <p>您的系统不支持此程序1!</p>
     </canvas>
</div>
</template>
<script>
let img1 = new Image();
let canvas;
let ctx;
export default {
  name: "clone",
  display: "Clone",
  order: 2,
  mounted() {
    this.initCanvas()
    // 当调整窗口大小时重绘canvas
    window.onresize = () => {
      this.initCanvas()
    }
  },
  components: {
   
  },
  data() {
    return {
      
    };
  },

  methods: {
  initCanvas() {
      console.log("初始化canvas")
      canvas = document.getElementById('myCanvas');
      ctx = canvas.getContext('2d');
      canvas.width = 400;
      canvas.height = 500;
      this.drawSmile()
    },
    drawSmile() {
      ctx.beginPath();
      ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
      ctx.moveTo(110, 75);
      ctx.arc(75, 75, 35, 0, Math.PI, false); // 口(顺时针)
      ctx.moveTo(65, 65);
      ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
      ctx.moveTo(95, 65);
      ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // 右眼
      ctx.stroke();
    },
	drag:function (e) {
        console.log('drag',e.target.id);
    },
    dragend:function (e) {
        console.log('dragend'+e)
    },
    dragstart:function(e){
	    console.log('dragstart');
        e.dataTransfer.setData('id',e.target.id);
		var dragobj = document.getElementById(e.target.id);
		e.dataTransfer.setData('offsetx',e.x-this.getLeft(dragobj));
		e.dataTransfer.setData('offsety',e.y-this.getTop(dragobj));
	},
    dragenter:function (e) {
        console.log('dragenter');
        e.preventDefault();
    },
    dragover:function (e) {
        console.log('dragover');
        e.preventDefault();
    },
    dragleave:function (e) {
        console.log('dragleave');
        e.preventDefault();
    },
    drop : function (e) {
        console.log('drop');
        var imgId = e.dataTransfer.getData('id');
		var offsetX = e.dataTransfer.getData('offsetx');
		var offsetY = e.dataTransfer.getData('offsety');

		debugger;
		img1.src=document.getElementById(imgId).src;
		
		//var x = e.clientX - this.$refs.canva.offsetLeft;
		//var y = e.clientY - this.$refs.canva.offsetTop;
		var x = e.clientX - offsetX ;
		var y = e.clientY - offsetY;

		var getBoundingClientRectTop = this.$refs.canva.getBoundingClientRect().top;
		var getBoundingClientRectLeft = this.$refs.canva.getBoundingClientRect().left;
		
		var realy = y - getBoundingClientRectTop;
		var realx = x - getBoundingClientRectLeft;
		console.log('x='+realx+',y='+realy);
		ctx.drawImage(img1,realx,realy,document.getElementById(imgId).width,document.getElementById(imgId).height);
        e.preventDefault();
		e.stopPropagation();
	},
	getTop:function(e) {
	var offset = e.offsetTop;

	if (e.offsetParent != null) offset += this.getTop(e.offsetParent);

	return offset;

	},
	//获取元素的横坐标,距离文档左边的宽度
	getLeft:function(e) {
	if(e!=null){
	 var offset = e.offsetLeft;

	 if (e.offsetParent != null) offset += this.getLeft(e.offsetParent);

	 return offset;
	}

  }
  }
};
</script>
<style>
    .demo * {
        float: left;
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
    img {
        width: 100px;
        height: 100px;
        display: inline-block;
    }
    .drop {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
</style>